<template>
  <div class="share-button">
    <el-dropdown @command="handleShare" trigger="click">
      <el-button :size="size" type="primary" plain class="share-btn">
        <el-icon><Share /></el-icon>
        分享
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="wechat">
            <div class="share-item">
              <el-icon color="#07C160"><svg viewBox="0 0 1024 1024"><path d="M320 512a96 96 0 1 0 0-192 96 96 0 0 0 0 192zm384-96a96 96 0 1 1-192 0 96 96 0 0 1 192 0zM187.8 659.6c-13.6 17.3-35.2 24.8-55.2 19.2-44.4-12.8-65.3-78.7-47-134.4 4.2-10.2 9.9-19.9 16.8-28.8 9.3-12.1 23.4-18.2 37.7-16.7 12.8 1.4 24 7.7 31.6 17.8 37.2 49.2 43.9 110.3 16.1 142.9zm569.2-118.3c-3.2-8-8-15.5-14.1-22-11.6-12.3-27.9-17.6-43.8-14.5-14.5 2.9-27 11.9-34.8 25-23.9 40-27.4 97.6-8.8 142 3.2 7.8 7.9 15 13.9 21.1 10.6 10.8 24.9 16.1 39.3 14.9 12.9-1.1 24.6-7.3 32.6-17.1 38.9-47.8 44.8-108.7 15.7-149.4zM903.3 655c-6.8 9.9-17.2 16.2-28.8 17.5-38.9 4.6-71.8-37.8-81.3-102.9-.9-6.4-1.3-12.9-1.2-19.3.3-19.2 8.1-37.4 21.4-49.8 26.2-24.2 74.4-19.5 121.4 14.7 8.1 5.9 15.4 12.7 21.8 20.4 26.8 32.1 23.4 85.7-10.2 124-9.7 11-23.9 16.1-37.8 13.7s-26.6-11.3-33.7-23.1c-13.1-21.8-19.1-48.5-18.1-75.7.5-14.4 15.5-24.8 33.8-20.9 12.9 2.7 21.5 14.1 19.5 25.7-3.9 23.1 1.7 49.7 24.1 67-7 8.3-15.9 13-30.9 8.7z"/></svg></el-icon>
              <span>微信</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item command="qq">
            <div class="share-item">
              <el-icon color="#12B7F5"><svg viewBox="0 0 1024 1024"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"/></svg></el-icon>
              <span>QQ</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item command="weibo">
            <div class="share-item">
              <el-icon color="#E6162D"><svg viewBox="0 0 1024 1024"><path d="M851.4 590.5a160.7 160.7 0 0 0-32.9-49.4c11.7-11.6 20.4-25.9 25.8-43.6 4.3-14.5 8-30 8-46.2 0-7.1-3.5-12-10.5-15-7.1-3-15.2-1.9-22.2 2.2a28.24 28.24 0 0 0-12.2 15.9c-11.7 52.9-43.6 79.5-95.4 79.5h-55.2c1.2-54.4-6.8-95.5-24.3-122.2-41.6-63.2-145.5-65.7-184.1-65.7-9.9 0-18.1 3.2-23.6 9.6-5.6 6.5-7.4 15.1-5.3 24.2 16.9 75.4 72.1 124.9 147.2 131.3 0 53-28.5 82-78.8 97.3-51.7 15.8-105.9 11.7-143.1-10.6-14.9-8.9-39.3-30-46.8-50-23.8-63.7 5.9-128.7 68.7-148.8 23.6-7.5 49.2-8.6 71.5-3 16.5 4.1 21.1-3.9 25.1-10.2 4-6.3 7.1-13.7 7.9-21.4.7-6.3-1.6-12.3-6.4-16.3-4.8-4-11.6-5.5-18.1-4-60.2 13.2-112.2-3.9-137.8-35.8C289.9 345.5 269.3 299.6 280.9 242.3c2.8-13.9-1.3-32.8-21.3-44.1-44.1-25-118.2 5.8-147.9 58.5-23.1 41-32.3 92.7-26.7 149.5 5.6 56.9 25 106.4 61 141.8 60.2 59.3 155.8 81.1 269.5 62.2 18.8-3.1 33.8-2.3 126.9 26 70.1 21.3 101.9 5.8 153.5-3m18.6-246c10.7 21.5-1.6 46.7-27.3 56.2-25.8 9.6-55.9 0-66.6-21.5-10.7-21.5 1.6-46.7 27.3-56.2 25.8-9.6 55.9 0 66.6 21.5m-75 93.6c31.8-9.4 67.7 10.7 79.7 44.8 12 34.1-4.1 71.2-35.9 80.7s-67.7-10.7-79.7-44.8c-12-34.1 4.1-71.2 35.9-80.7"></path></svg></el-icon>
              <span>微博</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item command="link" divided>
            <div class="share-item">
              <el-icon><Link /></el-icon>
              <span>复制链接</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <!-- 分享对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="360px"
      align-center
      :show-close="true"
      :close-on-click-modal="true"
      :close-on-press-escape="true"
    >
      <div class="share-dialog-content">
        <div v-if="shareType !== 'link'" class="qrcode-container">
          <div ref="qrcodeRef" class="qrcode"></div>
          <p class="tip">请使用{{ platformName }}扫描二维码分享</p>
        </div>
        <div v-else class="copy-link-container">
          <el-input
            v-model="shareLink"
            readonly
            :autosize="{ minRows: 3, maxRows: 5 }"
            type="textarea"
          />
          <el-button type="primary" @click="copyLink" style="margin-top: 15px;">
            复制链接
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Share, Link } from '@element-plus/icons-vue'
import { createShare, generateShareLink } from '../api/share'
import QRCode from 'qrcodejs2-fixes' // 需要安装这个依赖

const props = defineProps({
  targetType: {
    type: Number,
    required: true,
    validator: (value) => [1, 2].includes(value) // 1-问题, 2-回答
  },
  targetId: {
    type: Number,
    required: true
  },
  size: {
    type: String,
    default: 'default'
  }
})

const dialogVisible = ref(false)
const shareType = ref('')
const shareLink = ref('')
const qrcodeRef = ref(null)
const qrcodeInstance = ref(null)

const platformName = computed(() => {
  const names = {
    'wechat': '微信',
    'qq': 'QQ',
    'weibo': '微博',
    'link': '链接'
  }
  return names[shareType.value] || '扫码'
})

const dialogTitle = computed(() => {
  return `${platformName.value}分享`
})

// 处理分享选择
const handleShare = async (command) => {
  shareType.value = command
  dialogVisible.value = true
  
  try {
    // 获取分享链接
    const res = await generateShareLink({
      targetType: props.targetType,
      targetId: props.targetId,
      platform: getPlatformId(command)
    })
    
    shareLink.value = res.data
    
    // 记录分享行为
    createShare({
      targetType: props.targetType,
      targetId: props.targetId,
      platform: getPlatformId(command)
    }).catch((error) => {
      console.error('记录分享失败:', error)
    })
    
    // 如果不是链接分享，则生成二维码
    if (command !== 'link') {
      await nextTick()
      generateQRCode(shareLink.value)
    }
  } catch (error) {
    console.error('获取分享链接失败:', error)
    ElMessage.error('获取分享链接失败')
    dialogVisible.value = false
  }
}

// 生成二维码
const generateQRCode = (url) => {
  if (qrcodeInstance.value) {
    qrcodeInstance.value.clear()
  }
  
  const qrcodeElement = qrcodeRef.value
  if (!qrcodeElement) return
  
  qrcodeInstance.value = new QRCode(qrcodeElement, {
    text: url,
    width: 200,
    height: 200,
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
  })
}

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(shareLink.value)
    .then(() => {
      ElMessage.success('链接已复制到剪贴板')
    })
    .catch(() => {
      ElMessage.error('复制失败，请手动复制')
    })
}

// 获取平台ID
const getPlatformId = (platform) => {
  const platforms = {
    'wechat': 1,
    'qq': 2,
    'weibo': 3,
    'link': 4
  }
  return platforms[platform] || 4
}
</script>

<style scoped>
.share-button {
  display: inline-block;
}

.share-btn {
  display: flex;
  align-items: center;
}

.share-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qrcode-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.qrcode {
  margin-bottom: 15px;
}

.tip {
  color: #606266;
  font-size: 14px;
}

.copy-link-container {
  display: flex;
  flex-direction: column;
}
</style> 